.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

@each $bg in $bgImage {
  .#{$bg} {
    background-image: var(--#{$bg});
  }
}
@for $i from 0 through 100 {
  .left#{$i} {
    left: #{$i}px;
  }
  .left#{$i}\% {
    left: $i * 1%;
  }
  .bottom#{$i} {
    bottom: #{$i}px;
  }
  .bottom#{$i}\% {
    bottom: $i * 1%;
  }
  .top#{$i} {
    top: #{$i}px;
  }
  .top#{$i}\% {
    top: $i * 1%;
  }
  .right#{$i} {
    right: #{$i}px;
  }
  .right#{$i}\% {
    right: $i * 1%;
  }
  /** start: border-radius */
  .brd#{$i} {
    border-radius: #{$i}px;
  }
  /** end: border-radius */
  /** start: width&height */
  .w#{$i} {
    width: #{$i}px;
  }
  .w#{$i}\% {
    width: $i * 1%;
  }

  .w#{$i}vw {
    width: #{$i}vw;
  }
  .h#{$i} {
    height: #{$i}px;
  }
  .h#{$i}\% {
    height: $i * 1%;
  }
  .h#{$i}\vh {
    height: #{$i}vh;
  }
  .h#{$i}\vh\:max {
    max-height: #{$i}vh;
  }
  /** end: width&height */

  /** start: padding & margin */
  // .m[l,r,t,b]-[1-100]
  // .mx-[1-100]
  // .my-[1-100]
  // .p[l,r,t,b]-[1-100]
  // .px-[1-100]
  // .py-[1-100]
  .m-#{$i},
  .m#{$i} {
    margin: #{$i}px;
  }
  .m#{$i}vw {
    margin: #{$i}vw;
  }
  .p-#{$i},
  .p#{$i} {
    padding: #{$i}px;
  }
  .p#{$i}vw {
    padding: #{$i}vw;
  }
  .mx-#{$i},
  .mx#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  .mx#{$i}vw {
    margin-left: #{$i}vw;
    margin-right: #{$i}vw;
  }
  .my-#{$i},
  .my#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  .my#{$i}vw {
    margin-top: #{$i}vw;
    margin-bottom: #{$i}vw;
  }
  .px-#{$i},
  .px#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
  .px#{$i}vw {
    padding-left: #{$i}vw;
    padding-right: #{$i}vw;
  }
  .py-#{$i},
  .py#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
  .py#{$i}vw {
    padding-top: #{$i}vw;
    padding-bottom: #{$i}vw;
  }

  @each $dir in $direction {
    $value: map-get($dir, "value");
    $label: map-get($dir, "label");
    .m#{$label}-#{$i},
    .m#{$label}#{$i} {
      margin-#{$value}: #{$i}px;
    }
    .p#{$label}-#{$i},
    .p#{$label}#{$i} {
      padding-#{$value}: #{$i}px;
    }
  }
  /** end: padding & margin */
}
